<template>
  <div>
    <h1 v-color = "color1">指令的值1测试</h1>
    <h1 v-color = "color2">指令的值2测试</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      color1:'red',
      color2:'black'
    }
  },
  directives:{
    color:{
      //inserted 提供的是元素被添加到页面中时的逻辑
      inserted(el,binding){
        el.style.color = binding.value
      },
      //update指令的值修改的时候触发，提供值变化后，dom更新的逻辑
      update(el,binding){
        console.log('颜色被修改了')
        el.style.color = binding.value
      }
    }
  }
}
</script>

<style>

</style>